<template>
  <div :id="detail.identifier" ref="viewPanel" class="view-panel">
  </div>
</template>

<script>
import BaseView from './View';
import Vue from 'vue'
import request from '@/utils/request';
import {uuid} from "@jiaminghi/data-view/lib/util";

export default {
  name: 'view-custom',
  extends: BaseView,
  data() {
    return {}
  },
  mounted() {
    if (this.detail.dataBind.customId) {
      this.getEchartDataById(this.detail.dataBind.customId);
    }
  },
  methods: {
    getEchartDataById(id) {
      let url = "/zutai/bVueComponent/" + id
      request({
        url: url,
        method: "get",
      }).then((response) => {
        var html = response.data.componentTemplate;
        var css = response.data.componentStyle;
        var script = response.data.componentScript;
        if (!html || !script) {
          return;
        }
        let js = script.replace(/export default/, 'return ')
        try {
          const common = new Function(js)()
          common.template = html
          const Template = Vue.extend(common)
          this.program = new Template()
          this.$refs.viewPanel.appendChild(this.program.$mount().$el)
          if (css) {
            const styles = document.createElement('style')
            styles.type = 'text/css'
            styles.id = uuid()
            styles.innerHTML = css
            this.$refs.viewPanel.appendChild(styles)
          }
        } catch (error) {
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.view-panel {
  opacity: 1;
  width: 100%;
  height: 100%;
  overflow: auto;
}
</style>

